"use client"

import { useEffect } from "react"
import WelcomeScreen from "./WelcomeScreen"
import { LiveArea } from "./LiveArea"
import { ContentSelector } from "./ContentSelector"
import { GlobalLogo } from "./GlobalLogo"

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

interface MainContentProps {
  currentSection: number
  onSwitchSection: (section: number) => void
  selectedContent: string
  onSelectContent: (type: string) => void
  showWelcome: boolean
  onStartTeaching: () => void
  currentCourseNumber: string
  courseList: Course[]
  onActiveTabChange?: (tab: string) => void
}

export function MainContent({
  currentSection,
  onSwitchSection,
  selectedContent,
  onSelectContent,
  showWelcome,
  onStartTeaching,
  currentCourseNumber,
  courseList,
  onActiveTabChange
}: MainContentProps) {
  const sectionTabs = [
    "首页",
    "字根学习",
    "部首与笔画讲解", 
    "书写观察与训练",
    "拖拽组合",
    "游戏巩固",
    "结束页"
  ]

  const getCurrentCourse = () => {
    return courseList.find(course => course.lesson_number === currentCourseNumber)
  }

  const currentCourse = getCurrentCourse()

  // 将currentSection转换为activeTab字符串
  const getActiveTab = () => {
    return sectionTabs[currentSection] || "首页"
  }

  // 转换课程数据结构
  const getCurrentLesson = () => {
    if (!currentCourse) {
      return {
        id: 1,
        title: "第1课：认识木字",
        character: "木"
      }
    }
    return {
      id: parseInt(currentCourse.lesson_number),
      title: currentCourse.course_name,
      character: currentCourse.target_char
    }
  }

  // 监听activeTab变化并通知父组件
  useEffect(() => {
    const activeTab = getActiveTab()
    onActiveTabChange?.(activeTab)
  }, [currentSection, onActiveTabChange])

  // 计算当前进度百分比
  const getProgressPercentage = () => {
    const tabOrder = ['首页', '字根学习', '部首与笔画讲解', '书写观察与训练', '拖拽组合', '游戏巩固', '结束页']
    const currentIndex = tabOrder.indexOf(getActiveTab())
    return currentIndex >= 0 ? ((currentIndex + 1) / tabOrder.length) * 100 : 0
  }

  return (
    <div className="flex-1 flex flex-col h-screen overflow-hidden relative z-10">
      {/* 主内容区域 - 优化间距 */}
      <div className="flex-1 flex flex-col items-center w-full px-8 py-6 min-h-0 gap-6">
        {/* 板块切换 - 更窄的Tab栏 */}
        <div className="bg-white/95 backdrop-blur-sm p-2 rounded-xl flex gap-1 shadow-lg border border-white/60 relative overflow-hidden flex-shrink-0">
          {/* 闪光效果 */}
          <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
          
          {sectionTabs.map((tab, index) => (
            <button
              key={tab}
              onClick={() => onSwitchSection(index)}
              className={`
                px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative z-10
                ${currentSection === index
                  ? 'bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-md transform scale-105'
                  : 'text-gray-600 hover:text-gray-800 hover:transform hover:-translate-y-0.5'
                }
              `}
            >
              {tab}
              {currentSection === index && (
                <span className="absolute -top-1 -right-1 text-xs animate-bounce">✨</span>
              )}
            </button>
          ))}
        </div>

        {/* 中央直播区 - 严格16:9比例，四周留白 */}
        <div className="flex-1 w-full flex items-center justify-center min-h-0 px-4">
          <div className="w-full h-full flex items-center justify-center">
            {/* 16:9 容器 - 精确比例控制，等比例缩小 */}
            <div 
              className="relative rounded-3xl overflow-hidden"
              style={{
                width: 'min(calc(100vh - 240px) * 16/9 * 0.85, calc(100vw - 200px) * 0.85)',
                height: 'min(calc(100vh - 240px) * 0.85, calc((100vw - 200px) * 9/16) * 0.85)',
                aspectRatio: '16/9'
              }}
                          >
              {/* 彩色边框 */}
              <div className="absolute inset-0 bg-gradient-to-r from-red-400 via-yellow-400 via-green-400 via-blue-400 to-purple-400 rounded-3xl animate-pulse opacity-80 -z-10"></div>
                
                {/* 直播区LOGO - 对齐彩色边框右上角 */}
              <GlobalLogo 
                courseNumber={parseInt(currentCourseNumber)}
                show={getActiveTab() !== '首页' && getActiveTab() !== '结束页'}
                progress={getProgressPercentage()}
              />
              
              {/* 内容区域 */}
              <div className="absolute inset-0 p-8 flex items-center justify-center">
                {(showWelcome || currentSection === 0) ? (
                  <WelcomeScreen 
                    onStart={onStartTeaching}
                    currentCourse={currentCourse}
                  />
                ) : (
                  <LiveArea
                    activeTab={getActiveTab()}
                    selectedContent={selectedContent}
                    currentLesson={getCurrentLesson()}
                  />
                )}
              </div>
            </div>
          </div>
        </div>

        {/* 内容选择卡 - 从属于Tab，首页不显示 */}
        {currentSection !== 0 && (
          <div className="flex-shrink-0 w-full max-w-lg px-4">
            <ContentSelector
              selectedContent={selectedContent}
              onSelectContent={onSelectContent}
              currentCourse={currentCourse}
              currentSection={currentSection}
            />
          </div>
        )}
      </div>
    </div>
  )
} 